<template>
    <view class="overallContent">
        <view class="mainContent">
            <u-toast ref="uToast"/>
            <u-search
                placeholder="请输入人员姓名"
                v-model="inputValue"
                :clearabled="true"
                @search="handleSearch"
                @custom="handleSearch"
                @clear="handleClear"
            ></u-search>
            <u-radio-group
                v-model="value"
                width="100%"
                style="margin-top: 20rpx"
                active-color="red"
            >
                <u-radio
                    v-for="(item, index) in showList"
                    :key="index"
                    :name="item.id"
                    width="100%"
                >
                    <view style="width: 100%">
                        <view class="content">
                            <span class="size32 black">{{ item.label1 }}({{ item.id }})</span>
                            <span class="size24 gray">{{ item.label4 || "" }}</span>
                        </view>
                        <view class="content">
                            <span class="size24 gray">{{ item.label2 }}</span>
                            <span class="size24 gray">{{ item.label3 || "" }}</span>
                        </view>
                    </view>
                    <u-line />
                </u-radio>
            </u-radio-group>
        </view>
        <view class="buttons">
            <button class="pms-btn" @click="goBack">返回</button>
            <button class="pms-btn plain" @click="confirm">确定</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            inputValue: "",
            value: "",
            list: [],
            showList: [],
            peopleType: "",
        };
    },
    onLoad(options) {
        this.peopleType = options.peopleType;
        this.getPersonList(options);
        this.value=options.userId;
    },
    methods: {
        async getPersonList(options) {
            let userInfo = [];
            //1 换签审核，调君南接口  2 换签发起 调中软接口
            if(options.peopleType === '1'){
                //下一步审核页面选人
                const param = {
                    'procInstId': options.processInstId,
                    'nodeId': options.nodeId,
                    'userIds': '',
                    'orgCode': '',
                    'orgId': '',
                    'detailId': options.detailId === 'null' ? null :options.detailId,
                    'templateId': options.templateId === 'null' ? null :options.templateId,
                }
                this.$axios.post('/api/workflow/getNextUsersByRole',param,{ip:'JN'}).then((res)=>{
                    this.getUserList(res.data)
                })
            }else{
                //换签发起时候  选人
                this.$axios.post('/material/api/app/pubSwapLabel/startFlaowNextPerson?sceneCode=SWAP_LABEL&swapRole='+ options.swapRole+'&prjId='+options.prjId).then((res)=>{
                    this.getUserList(res.data)
                })
            }

        },
        getUserList(data){
            let userInfo = [];
            userInfo = data;
            this.traverse(userInfo, []);
            if (userInfo.length == 0) {
                this.$nextTick(()=>{
                    this.$refs.uToast.show({
                        title: "选择办理人员时，如果待选人员为空，请联系IT专岗或地市4A管理员配置!",
                        type: "error",
                        isTab: true,
                    });
                    return;
                })
            }
        },
        /**
         * 遍历数据结构以生成特定格式的列表
         * 该方法主要用于递归地处理具有层级关系的数据，将其转换为一个flat列表
         * 每个列表项包含从根节点到当前节点的标签路径以及当前节点的ID
         *
         * @param {Array} data - 需要遍历的原始数据数组，每个元素包含label和children属性
         * @param {Array} tempList - 用于临时存储从根节点到当前节点的标签路径
         */
        traverse(data, tempList) {
            // 遍历输入的数据数组
            data.forEach((element) => {
                // 复制临时列表以避免引用修改
                let tList = [...tempList];
                // 将当前元素的标签添加到临时列表中
                tList.push(element.label);

                // 检查当前元素是否还有子元素
                if (element.children && element.children.length > 0) {
                    // 如果有子元素，则递归调用traverse方法
                    this.traverse(element.children, tList);
                } else {
                    // 如果没有子元素，则创建一个新的对象来存储当前路径的信息
                    let obj = {};
                    let num = tList.length;

                    // 遍历临时列表，为对象添加标签属性
                    tList.forEach((el, index) => {
                        obj[`label${num - index}`] = el;
                    });
                    // 添加当前元素的ID到对象中
                    obj.id = element.id;
                    // 将包含路径信息的对象添加到列表中
                    if(obj.id){
                        this.list.push(obj);
                    }
                }
            });
            // 更新显示列表，使其反映任何更改
            this.showList = [...this.list];
        },
        /**
         * 处理搜索功能的方法
         *
         * 本方法根据inputValue的值来过滤显示的列表showList
         * 如果inputValue有值，则showList将只包含label1与inputValue匹配的项
         * 如果inputValue为空，则showList将恢复为原始列表list的副本
         */
        handleSearch() {
            // 检查inputValue是否有值
            if (this.inputValue) {
                // 使用filter方法过滤showList，只保留label1与inputValue匹配的项
                this.showList = this.list.filter((item) => {
                    return item.label1 == this.inputValue;
                });
            } else {
                // 如果inputValue为空，将showList恢复为list的副本
                this.showList = [...this.list];
            }
        },
        handleClear() {
            this.showList = [...this.list];
        },
        goBack() {
            uni.navigateBack({
                delta: 1,
            });
        },
        /**
         * 确认选择人员后执行的操作
         * 此函数根据选择的人员类型和所选人员的信息，构造相应的对象并传递给上一个页面
         * 同时，如果未选择人员，将显示警告提示
         */
        confirm() {
            // 检查是否选择了人员
            if (!this.value) {
                return this.$refs.uToast.show({
                    title: `请选择人员`,
                    type: "warning",
                });
            }

            // 获取当前页面栈，用于找到上一个页面
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];

            // 根据所选人员的ID过滤列表，获取所选人员的信息
            let res = this.showList.filter((item) => {
                return item.id == this.value;
            });

            // 初始化要传递给上一个页面的对象
            let obj = {};

            // 根据不同的人员类型，构造不同的对象
            // if (this.peopleType == 1) {
            //     obj = {
            //         name: `${res[0].label1}(${res[0].id})`,
            //         id: res[0].id,
            //     };
            // }
            obj = {
                name: `${res[0].label1}(${res[0].id})`,
                id: res[0].id,
            };

            // 调用上一个页面的方法，传递所选人员的信息
            prevPage.handleBack(obj);

            // 返回上一个页面
            uni.navigateBack();
        },
    },
};
</script>
<style lang="scss" scoped>
.overallContent {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 0 0 0 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.buttons {
    display: flex;
    justify-content: center;
    background: #fff;
    font-size: 12rpx;
}
.pms-btn {
    height: 60rpx;
    min-width: 130rpx;
    line-height: 60rpx;
    border-radius: 60rpx;
    color: #ca171d;
    border: 1px solid #ca171d;
    margin: 20rpx 6rpx;
    font-size: 24rpx;
    background: #fff;
    &.plain {
        color: #fff;
        background: #ca171d;
    }
}
.mainContent {
    padding: 10rpx;
    overflow: auto;
}
.content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
::v-deep .u-radio__label {
    width: 100%;
}
::v-deep .u-radio-group {
    width: 100%;
}
.size32 {
    font-size: 28rpx;
}
.size24 {
    font-size: 24rpx;
}
.black {
    color: #000;
}
.gray {
    color: #aaa;
}
</style>
